import React from 'react'
// import {toJS} from 'mobx'
import {inject, observer} from 'mobx-react';
import {Tools} from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { ListAdvanced } from 'weaver-mobile-page';
const getLabel = Tools.getLabel;

@withRouter
@inject ('pendingStore')
@observer
class Pending extends React.Component {
    constructor(props){
        super(props);
       
    }

    componentDidMount() {
        const {pendingStore} = this.props;
        const {listAd} = pendingStore;
        const { listViewStore } = listAd;

        let params = {
            comeFrom:'more',
            viewcondition: 41,
            moduleid: 1,
            menuid: 1
        }
        listViewStore.clearData();
        // getUpComing(params)
        listAd.getData({ url:'/api/fna/fnaEmbileMicroReport/getUpComingAll',  method:'GET',params:{...params}});
    }

    render() {
        const {pendingStore} = this.props;
        const {listAd,showCheck} = pendingStore;

        return (
            <div className={'fna-pending'}>
                <ListAdvanced 
                    className={'fna-pending-listAdvanced'}
                    store={listAd}
                    hasAdvanceSerach
                    rowKey="requestid"
                    searchKey="requestname"
                    treeKey="domid"
                    // extraPrompt={!showCheck ? null : null}
                    getTemplate={this.getTemplate}
                    dataFetchOptions={{
                        url: '/api/fna/fnaEmbileMicroReport/getUpComingAll',
                        method: 'GET',
                        params:{
                            comeFrom:'more',
                            viewcondition: 41,
                            moduleid: 1,
                            menuid: 1
                        }
                    }}
                    searchBarProps={{
                        showSelectButton: true,
                        selectText: getLabel(63, '类型'),
                        onSelectButtonClick: () => {},
                        placeholder: getLabel(391119, '请输入流程标题'),
                        // extraButton: (tabs && tabs.length > 1) ? null : [
                        //     {
                        //         key: 'advanced', show: <Link to={searchPath}>
                        //             <Icon
                        //                 type={`filter-o${Highlight ? '-hot' : ''}`}
                        //                 style={{ color }}
                        //             />
                        //         </Link>
                        //     }
                        // ]
                      
                    }}
                    conditionFetchOptions={{
                        url: '/api/fna/fnaEmbileMicroReport/getUpComingAS',
                        method: 'GET',
                        params:{
                            comeFrom:'more'
                        }
                    }}
                    leftTreeFetchOptions={{
                        url: '/api/fna/fnaEmbileMicroReport/getUpComingAS',
                        method: 'GET',
                        params:{
                            comeFrom:'more'
                        }
                    }}
                    showCheck={false}
                    onSearch={this.onSearch}
                    onLeftTreeChange={this.onLeftTreeChange}
                />




            </div>
        )
    }

    onSearch = (status = {}) => {
        const {pendingStore} = this.props;
        const { listAd, leftTree_params } = pendingStore;
        const { searchAdvancedStore, searchParams,listViewStore } = listAd;
        // 搜索框等搜索数据
        let params = { ...searchParams };
        // 获取高级搜索参数
        if (searchAdvancedStore) {
            const { formParams } = searchAdvancedStore.form;
            params = { ...formParams, ...leftTree_params };
        }
        // 清除列表数据
        listViewStore.clearData();
        // if (!status.notClearSelectedRowKeys) {//清空列表已选中数据
        //     listViewStore.setState({ selectedRowKeys: [] })
        // }

        //获取流程数据
        params = {
            ...params,
            comeFrom:'more',
            viewcondition: 41,
            moduleid: 1,
            menuid: 1
        }

        // 带参数请求列表数据
        listAd.getData({ url:'/api/fna/fnaEmbileMicroReport/getUpComingAll',  method:'GET',params:{...params}});
    }

    //左侧树回调
    onLeftTreeChange = (domid, name, valueArray) =>{

    }

    //获取模板  待办事项
    getTemplate = (template) => {
        const {pendingStore} = this.props;
        const {} = pendingStore;

        const newTemplate = {
            default: [
                {
                    key: 'col1',
                    // style: { flex: '0 0 auto'},
                    render: (data) => {
                        let {requestname,requestmarkspan,createdate,currentnodetypespan,createrspan,amountspan,requestnamespan} = data;
                        return(
                            <div className={`fna-home-template-list`}>
                                <div className={`fna-home-template-list-head`}>
                                    <span dangerouslySetInnerHTML={{__html: requestname}}/>
                                    <span dangerouslySetInnerHTML={{__html: currentnodetypespan}} />
                                </div>

                                <div className={`word-fontSize-12 fna-home-template-list-detail`}>
                                    <span>{getLabel(126847,'流程编号')}：</span><span>{requestmarkspan}</span>
                                </div>
                                <div className={`word-fontSize-12 fna-home-template-list-detail`}>
                                    <span>{createrspan}：</span><span>{createdate}</span>  
                                </div>
                                <div className={'last'}>
                                    <span className={'costBtn'}>{requestnamespan}</span>
                                    <span className={'gay'}>
                                        <span>CNY</span>
                                        <span>{amountspan}</span>
                                    </span>
                                </div>
                            </div>
                            
                        )
                    }
                },  

                    
            ],
        };

        return newTemplate;
    }




}

export default Pending;